/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

// common css utils file
@import url('./variables.less');
@primary-light: rgb(244, 240, 253);
@primary-hover-light: rgba(219, 209, 249);
@trigger-btn-hover-bg: #efefef;

// Global css
.global-border {
  border: @global-border;
}

.card-shadow {
  box-shadow: @card-shadow;
}

.shadow-none {
  box-shadow: none;
}

.overflow-hidden {
  overflow: hidden;
}

.deleted-badge-button {
  margin-left: 4px;
  padding: 2px 8px;
  font-weight: 500;
  border-radius: @border-radius-base;
  color: @error-color;
  background-color: @error-light-color;
}

.show-more,
a[href]:not(.button-comp):not(.no-underline):not(.link-text-info),
.link-text {
  color: @link-color;

  &:hover {
    color: @link-color;
    text-decoration: underline;
  }

  &:focus {
    color: @link-color;
    text-decoration: underline;
    cursor: pointer;
  }
}

a[href].link-text-grey,
.link-text-grey {
  color: @text-color;

  &:hover {
    color: @text-color;
    text-decoration: underline;
  }
  &:focus {
    color: @text-color;
    text-decoration: underline;
    cursor: pointer;
  }
}

// used in glossary + query right panel, to keep both consistent
.right-panel-label {
  font-size: 14px;
  font-weight: 500;
  color: @text-grey-muted;
}

// Left and Right Panel shadow color
.panel-shadow-color {
  box-shadow: @panels-shadow-color;
}

// text color
.text-primary {
  color: @primary-color;
  &:hover {
    color: @primary-color;
  }
}
.text-color-inherit {
  color: inherit;
}
.error-text {
  color: #ff4c3b;
}
.text-white {
  color: @white;
}
.text-grey-muted {
  color: @text-grey-muted;
}
.text-grey-body {
  color: @text-color-secondary;
}
.text-gray-400 {
  color: #9ca3af;
}
.text-body {
  color: @text-color-secondary;
}

.text-success {
  color: #008376;
}

.text-failure {
  color: #cb2431;
}

// text alignment

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.text-underline {
  text-decoration: underline;
}

// Border
.no-border {
  border: none;
}
.border {
  border: @global-border;
}
.border-1 {
  border-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left: 2px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-t-1 {
  border-top-width: 1px;
  border-style: solid;
  border-color: @border-color;
}
.border-main {
  border-color: @border-color;
}
.border-primary {
  border-color: @primary-color;
}
.border-gray {
  border-color: @border-color;
}
.border-light-gray {
  border-color: @light-border-color;
}

.line-height-16 {
  line-height: 16px;
}

// Radius

.rounded-4 {
  border-radius: @border-radius-base;
}
.rounded-full {
  border-radius: 9999px;
}

.rounded-6 {
  border-radius: 6px;
}
.rounded-12 {
  border-radius: 12px;
}

.break-word {
  word-break: break-word;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}
.bg-body-main {
  background: @body-bg-color;
}
.bg-primary-lite {
  background: @primary-light;
}
.bg-primary {
  background: @primary-color;
}
.bg-primary-hover-lite {
  background-color: @primary-hover-light;
}
.bg-grey {
  background-color: @border-color;
}
.bg-white {
  background-color: @white;
}

.activeCategory {
  border-left: 2px solid @primary-color;
  background: @primary-light;
  padding-left: 10px;
  font-weight: 600;
}

.shadow-custom {
  box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
}
.card-box-shadow {
  box-shadow: rgba(0, 0, 0, 0.06) 1px 1px 8px;
}
.shadow-base {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.opacity-60 {
  opacity: 0.6;
}

.link-hover {
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gap-2 {
  gap: 0.5rem /* 8px */;
}

/* SSO layout style  */
.sso-container {
  width: 100%;
  height: 580px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;

  span {
    margin: 0;
  }
}

.transform-180 {
  transform: rotate(180deg);
}

.no-underline {
  text-decoration: none;
}

.z-5 {
  z-index: 5;
}
.z-10 {
  z-index: 10;
}
.z-400 {
  z-index: 400;
}

.entity-details-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: 0;
}

.description-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 18px;
}

.entity-header-display-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: @text-color !important;
  text-decoration: none !important;
}

/* Opacity CSS start */

.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-100 {
  opacity: 1;
}

/* Opacity CSS end */

/* Group CSS Start */

.custom-group {
  &:hover {
    .group-hover-opacity-100 {
      opacity: 1;
    }
  }
}

/* Group CSS End*/

.quick-filter-dropdown-trigger-btn {
  padding: 4px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.quick-filter-dropdown-trigger-btn:hover,
.quick-filter-dropdown-trigger-btn:focus {
  background-color: @trigger-btn-hover-bg;
}

// Rotate
.rotate-inverse {
  transform: rotate(180deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate--90 {
  transform: rotate(-90deg);
}

.whitespace-nowrap {
  white-space: nowrap;
}

.service-form-container {
  margin: 16px auto 0;
  padding-bottom: 16px;
}

// breadcrumb

.breadcrumb-item {
  font-size: 12px;
  .link-title {
    font-size: inherit !important;
    color: @text-grey-muted !important;
  }
}

.link-title:hover {
  text-decoration: none !important;
}

// Multiple label in a field with required

.multiple-label-field label {
  align-items: flex-start;
}
.multiple-label-field
  .ant-form-item-label
  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
  line-height: 24px;
}

// Switch Inline Field

.switch-field .ant-form-item {
  margin: 0;
}

.common-left-panel-card-heading {
  color: @group-title-color;
  font-size: 12px;
}

.no-scrollbar {
  scrollbar-width: none;
  ::-webkit-scrollbar {
    display: none;
  }
}

// beta tag for service page
.service-beta-tag {
  sup {
    padding: 0 4px;
    margin-left: 2px;
    font-size: 10px;
  }
}

/* Tabs */
.ant-tabs-top > .ant-tabs-nav::before {
  border-color: @border-color;
}
